<!--
  *@Description : 增加评论组件
  *@author 萧红
  *@date 2020-03-27 21:19
  *@LastEditTime 2020-03-27 21:19
  *@LastEdititors
-->
<template>
    <div id="addPinlun">
      <div class="detailBottom">
        <div class="moni-input" @click="showAddPop">
          <span class="cubeic-edit"></span>
          <span>...想说点什么?</span>
        </div>
        <div class="btn">
          <div @click="$emit('dianzan')"><span class="iconfont icondamuzhi" :class="{selected:data.indianzan}"></span> <span class="number">{{data.dianzan}}</span></div>
          <div @click="$emit('shoucang')"><span class="iconfont iconshoucang" :class="{selected:data.inshouchang}"></span> <span class="number">{{data.shoucang}}</span></div>
          <div><span class="cubeic-share"></span> <span class="number"></span></div>
        </div>
      </div>
      <cube-popup type="my-popup" :position="'bottom'" :mask-closable="true" ref="myPopup">
        <div class="pinlun-box">
          <div class="input">
            <input type="text" v-model="content" placeholder="评论">
          </div>
          <div class="btn">
            <span class="iconfont icondamuzhi" :class="{selected:data.indianzan}"></span>
            <span class="iconfont iconshoucang" :class="{selected:data.indianzan}"></span>
            <div class="sendBtn" @click="handClick">
              <span class="cubeic-share" slot="prepend"></span>
              发送
            </div>
          </div>
        </div>
      </cube-popup>
    </div>
</template>

<script>
export default {
  name: 'AddPinlun',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  created () {
    // console.log(this.data)
  },
  methods: {
    showAddPop () {
      const component = this.$refs.myPopup
      component.show()
    },
    handClick () {
      if (this.content === '') {
        this.$toast('说点什么呗(*^▽^*)！')
        return false
      }
      const component = this.$refs.myPopup
      component.hide()
      this.$emit('addPinlun', this.content)
      this.content = ''
    }
  },
  data () {
    return {
      content: '' // 评论内容
    }
  }
}
</script>

<style scoped lang="stylus">
#addPinlun
{
  height 50px
  .detailBottom
  {
    border-top 1px solid #f0f0f0
    width 100%
    overflow hidden
    position: fixed;
    height 50px
    bottom 0
    z-index 1
    display flex
    color #999
    align-items center
    background-color white
    padding 0px 2px
    .moni-input
    {
      width 50%
      height 24px
      line-height 24px
      text-align left
      margin-left 12px
      padding-left 12px
      margin-right 4px
      box-sizing border-box
      background-color #f0f0f0
    }
    .btn
    {
      width 50%
      height 24px
      line-height 24px
      display flex
      flex-flow row nowrap
      align-items center
      div
      {
        width 30%
        border-left:1px solid #f0f0f0
        span
        {
          font-size 16px
          margin 0px 2px
        }
        span.selected
        {
          color #ff4466
        }
        .number{font-size:16px;}
      }
    }
  }
  .pinlun-box
  {
    width: 100%
    height 50px;
    display flex
    flex-flow row nowrap
    overflow hidden
    justify-content space-between
    align-items center
    background-color white
    padding 0px 10px
    .input
    {
      width 50%
      height 30px
      input
      {
        width 90%
        height 30px
        background-color #f0f0f0
      }
    }
    .btn
    {
      width 50%
      height 50px
      display flex
      flex-flow row nowrap
      justify-content start
      align-items center
      padding 0px 10px
      span
      {
        width 25%
      }
      span.selected
      {
        color #ff4466
      }
      .sendBtn
      {
        width 40%
        line-height 30px
        background-color deeppink
        border 1px solid #f0f0f0
        border-radius 5px;
        color snow
      }
    }
  }
}
</style>
